<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>淘票票</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/axios.min.js"></script>
  <style>
    .shopp {
      color: #fff;
      padding-left: 100px;
      padding-right: 100px;
      position: relative;
      height: 500px;
      background-color: #2b2b2b;
    }

    .shopp input {
      display: block;
    }

    .shopp button {
      display: block;
    }

    #txt li {
      width: 210px;
      background-color: rgba(255, 0, 0, 0.329);
      float: left;
      margin-right: 10px;
      margin-top: 6px;
    }

    .shopp .count-price,
    .count {
      color: red;
    }

    .butt {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: red;
    }
  </style>
</head>

<body>
  <header>
    <div class="top">
      <ul class="top-left">
        <li><a href="login.html">亲，请登录</a></li>
        <li><a href="reg.html">免费注册</a></li>
        <li><a href="#">手机逛淘宝</a></li>
      </ul>
      <ul class="top-right">
        <li><a href="https://www.taobao.com/">淘宝网首页</a></li>
        <li class="dropdown">
          <a href="#">我的淘宝</a>
          <ul class="dropdown__content">
            <li><a href="#">已买到的宝贝</a></li>
            <li><a href="#">我的足迹</a></li>
          </ul>
        </li>
        <li><a href="#">购物车</a></li>
        <li class="dropdown">
          <a href="#">收藏夹</a>
          <ul class="dropdown__content">
            <li><a href="#">收藏的宝贝</a></li>
            <li><a href="#">收藏的店铺</a></li>
          </ul>
        </li>
        <li><a href="#">商品分类</a></li>
        <li><a href="#">免费开店</a></li>
        <li class="dropdown">
          <a href="#">千牛卖家中心</a>
          <ul class="dropdown__content">
            <li><a href="#">免费开店</a></li>
            <li><a href="#">已卖出的宝贝</a></li>
            <li><a href="#">出售中的宝贝</a></li>
            <li><a href="#">卖家服务市场</a></li>
            <li><a href="#">卖家培训中心</a></li>
            <li><a href="#">体检中心</a></li>
            <li><a href="#">问商友</a></li>
          </ul>
        </li>
        <li><a href="#">联系客户</a></li>
        <li><a href="#">网站导航</a></li>
      </ul>
    </div>
  </header>
  <nav>
    <div>
      <img src="img/01.png" alt="">
      <ul>
        <li> <a href="#">郑州</a></li>
        <li><a href="index.html" style="color:#6b6b6b;">首页</a></li>
        <li>影片</li>
        <li>影院</li>
      </ul>
      <p>
        <a href="#">手机购买</a>
        <a href="#">客服咨询</a>
      </p>
    </div>
  </nav>

  <div class="shopp">
    <h2>购物车列表</h2>
    全选<input type="checkbox" class="all-sel" onchange="allSelChange(this)" />
    总票价:<span class="count-price">0.00</span>
    数量:<span class="count">0</span>
    <hr>
    <ul id="txt">

      <!-- <li>
        
        <h2></h2>
        <img src="" alt="" />
        <p></p>
        <input type="number" name="" id="" value="" />
        <button>删除</button>
      </li> -->
    </ul>
    <button class="butt">支付宝支付</button>
  </div>


  <div class="footer" style="margin-top:0px">
    <div class="footWrap">
      <div class="footMiddle" style="height: 150px;">
        <div class="footLogo">
          <a href="#"><img src="img/TB.png" /></a>
          <span>如果您是消费者，</span>
          <span>请拨打0571-88157838</span>
          <span>如果您是影院/合作商家，</span>
          <span>请拨打400-825-9220</span>
          <span>(服务时间:9:00-21:00)</span>
        </div>
        <dl>
          <dt>选座购票流程</dt>
          <dd><a href="#" target="_blank" title="选择影片和场次">选择影片和场次</a></dd>
          <dd><a href="#" target="_blank" title="选择中意的座位">选择中意的座位</a></dd>
          <dd><a href="#" target="_blank" title="支付并收到取票短信">支付并收到取票短信</a></dd>
        </dl>
        <dl>
          <dt>取票流程</dt>
          <dd><a href="#" target="_blank" title="收到取票短信">收到取票短信</a></dd>
          <dd><a href="#" target="_blank" title="影院自助取票">影院自助取票</a></dd>
          <dd><a href="#" target="_blank" title="短信重发方式">短信重发方式</a></dd>
        </dl>
        <dl>
          <dt>常见问题</dt>
          <dd><a href="#" target="_blank" title="是否支持退换票">是否支持退换票</a></dd>
          <dd><a href="#" target="_blank" title="填错手机号怎么办">填错手机号怎么办</a></dd>
          <dd><a href="#" target="_blank" title="更多问题>>">更多问题>></a></dd>
        </dl>
        <dl>
          <dt>协议规范</dt>
          <dd><a href="#" target="_blank" title="用户服务协议">用户服务协议</a></dd>
          <dd><a href="#" target="_blank" title="食品管理规范">食品管理规范</a></dd>
          <dd><a href="#" target="_blank" title="隐私权政策">隐私权政策</a></dd>
          <dd><a href="#" target="_blank" title="退改签服务费规范">退改签服务费规范</a></dd>
        </dl>
        <div class="order-code" style="background-image:url(./img/xiaz.png); width:200px;">
        </div>
      </div>
      <div class="footBottom" style="height: 140px">
        <img class="img" src="img/T1.png">
        <div class="footer-ali">
          <a href="#" data-spm-anchor-id="1.1000386.245549.1">阿里巴巴集团</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.2">阿里巴巴国际站</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.3">阿里巴巴中国站</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.4">全球速卖通</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.5">淘宝网</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.6">天猫</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.7">聚划算</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.8">一淘</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.9">阿里妈妈</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.10">阿里云计算</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.11">云OS</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.12">万网</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.13">中国雅虎</a>
          <b>|</b>
          <a href="#" data-spm-anchor-id="1.1000386.245549.14">支付宝</a>
        </div>
        <div class="foot-nav">
          <a href="#" data-spm-anchor-id="1.1000386.245549.15">关于淘宝</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.16">合作伙伴</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.17">营销中心</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.18">联系客服</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.19">开放平台</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.20">诚征英才</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.21">联系我们</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.22">网站地图</a>
          <a href="#" data-spm-anchor-id="1.1000386.245549.23">法律声明</a>
          <span>&copy; 2017 Taopiaopiao.com 版权所有</span><br>增值电信业务经营许可证：沪B2-20170117 <a href="#"
            target="_blank">沪ICP备16050036号-1</a> <a href="#" target="_blank" title="营业执照"> 营业执照</a>
          <br><span>违法不良信息举报电话 0571-88157838</span>
          <br><span>违法不良信息举报邮箱 taopiaopiao_tousu@list.alibaba-inc.com</span>
        </div>

      </div>
    </div>
  </div>
  <script>
    loadCartList();

    async function loadCartList() {
      let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
      let id = localStorage.getItem("id");
      let res = await axios.get(cartListAPI, {
        params: {
          id: id
        }
      });
      // console.log(res.data);
      let cartArr = res.data.data;
      //根据服务返回的购物车数组-生成 页面结构
      let resArr = cartArr.map(
        (v) => `
              <li>
                  <input class='single-select' type="checkbox" onchange="singleSelect(${v.pid},this)">
                  <h4>${v.pname}</h4>
                  <img src="${v.pimg}" alt="" />
                  <p class="price">${v.pprice}</p>
                  <input class="pnum" min='1' onchange="numChange(${v.pid},this)" type="number" name="" id="" value="${v.pnum}" />
                  <button onclick="delCart(${v.pid},this)">删除</button>
              </li>`
      );
      // console.log(resArr);

      let ul = document.getElementById('txt');
      ul.innerHTML = resArr.join("");
    }

    async function delCart(pid, btn) {
      // console.log(pid);
      let uid = localStorage.getItem("id");
      let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
      let res = await axios.get(delCartAPI, {
        params: {
          uid: uid,
          pid
        }
      });
      console.log(res.data);
      //重新加载购物车列表 或者 删除dom元素
      loadCartList();
      // console.log(this); //window
      // btn.parentNode.remove();
    }

    // function test(btn, evt) {
    // console.log(btn);
    // console.log(evt);
    // }

    async function numChange(pid, ipt) {
      console.log(ipt.value, pid);
      let updateCartNumAPI =
        "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
      let pnum = ipt.value;
      // console.log(localStorage.getItem);
      let uid = localStorage.getItem("id");
      let params = {
        pnum,
        pid,
        uid
      };
      // console.log(params);
      let res = await axios.get(updateCartNumAPI, {
        params
      });

      // console.log(res.data);
    }
    // 单选事件
    function singleSelect(pid, ipt) {
      // console.log(ipt.checked);
      //找到所有单选框
      calCountPrice();

      let singleSelectArr = document.querySelectorAll(".single-select");

      let arr = [...singleSelectArr];
      let isAllChecked = arr.every(function (v) {
        return v.checked === true;
      });
      // console.log(isAllChecked);

      document.querySelector(".all-sel").checked = isAllChecked;
    }

    // 全选按钮事件
    function allSelChange(ipt) {
      // console.log(ipt.checked);
      //让单选的状态 跟 全选一致
      let singleSelectArr = document.querySelectorAll(".single-select");
      singleSelectArr.forEach((v) => (v.checked = ipt.checked));
      calCountPrice();
    }

    function calCountPrice() {
      let singleSelectArr = document.querySelectorAll(".single-select");
      // console.log(singleSelectArr);
      let count = 0;
      let countPrice = 0;
      singleSelectArr.forEach((ipt) => {
        if (ipt.checked == true) {
          console.log(ipt);
          //找到选中元素的 父元素，根据父元素 再找子元素
          let currentLi = ipt.parentNode;
          let price = currentLi.querySelector(".price").innerHTML;
          let pnum = currentLi.querySelector(".pnum").value;
          let currentCount = price * pnum;
          console.log(currentCount);
          count = count + Number(pnum);
          countPrice += currentCount;
        }
      });
      console.log(count, countPrice);
      document.querySelector(".count").innerHTML = count;
      document.querySelector(".count-price").innerHTML = countPrice;
    }
  </script>
</body>

</html>